<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"
  ng-if="MindtaggerTask.items.length > 0">
  <div class="container-fluid">
    <div class="col-md-7 text-left" style="padding-top:20px; padding-bottom:20px;">
      <div ng-transclude></div>
    </div>

    <div class="col-md-5">
      <div class="col-xs-9 text-right">
        <pagination class="pagination-sm fa"
          total-items="MindtaggerTask.itemsCount" items-per-page="MindtaggerTask.itemsPerPage"
          ng-model="MindtaggerTask.currentPage"
          ng-model-options="{ debounce: 200 }"
          previous-text="&#xf04a;" next-text="&#xf04e;" first-text="&#xf049;" last-text="&#xf050;"
          max-size="5" boundary-links="true"></pagination>
      </div>
      <div class="col-xs-3 text-right">
        <!-- TODO separate this in a menu dropup -->
        <span class="input-group" style="margin-top:20px;">
          <input type="number" min="1" max="50" size="2" value="10"
          style="min-width:60px;"
          ng-model="MindtaggerTask.itemsPerPage"
          ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
          class="form-control input-sm">
          <span class="input-group-addon">/page</span>
        </span>
      </div>
    </div>
  </div>
</nav>
<style>body { padding-bottom: 180px; }</style>
